<template>
		<div style="text-align: center;color: black;">
			<div style="margin-top: 2.5vh;">请输入支付密码</div>
			<div style="margin-top: 3vh; height: 12vh;">
				<span>{{data.user.userName}}</span> <br>
				<span style="font-size: 5vh;">&yen;{{data.money}}</span>
			</div>
			<div style="width: 100%;height: 1px;background-color: #CDD0D6"></div>
		</div>
		<van-cell style="text-align: left;" title="支付方式">

			<template #right-icon>
				<van-icon name="gold-coin" class="gold-coin" style="color: gold;"/>
				零钱
			</template>
		</van-cell>
		<van-password-input :value="mima" :focused="showKeyboard" @focus="showKeyboard = true" :gutter="10"
			class="mima" />
		<van-number-keyboard @input="pay" v-model="mima" :show="showKeyboard" @blur="showKeyboard = true">
			<template v-slot:extra-key></template>
		</van-number-keyboard>
</template>

<script>
	import {
		showNotify
	} from 'vant';

	export default {
		props:{
			url:String,
			close:Function,
			data:Object
		},
		data(){
			return{
				show:true,
				mima:'',
				showKeyboard:true
			}
		},
		methods:{
			pay(){
				if(this.mima.length === 5){
					this.$axios({
						url:this.url+"?oid="+this.data.id,
						method:'GET',
						headers: {
							token: this.$cookies.get('token')
					}
					}).then((res)=>{
						if(res.data.code!==0){
							showNotify({
								type: 'danger',
								message: res.data.message
							});
							this.close();
						}else{
							showNotify({
								type: 'success',
								message: "支付成功"
							});
							this.close();
						}
					}).catch((err)=>{
						console.log(err);
					})
				}
			}
		}
	};
</script>

<style>
	:root:root {
		--van-password-input-background:#C0C4CC;
		--van-number-keyboard-key-height: 6vh;
	}

	.gold-coin {
		font-size: 3vh;
		color: greenyellow;
	}
</style>